<template>
  <div v-if="!imageUrl" :style="{ 'border-radius': avatarStyle.radius, ...avatarStyle }" class="avatar">
    {{ analysisAvatar }}
  </div>
  <div v-else :style="{ ...avatarStyle }">
    <el-image loading="lazy" :src="imageUrl" fit="cover" :style="{ 'border-radius': avatarStyle.radius }"></el-image>
  </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  info: {
    type: Object,
    default: () => ({})
  },
  avatarStyle: {
    type: Object,
    default: () => {
      return {
        width: "36px",
        height: "36px",
        radius: "4px"
      };
    }
  },
  avatarName: {
    type: String,
    default: "nickName"
  },
  urlField: {
    type: String,
    default: "avatar"
  }
});
const analysisAvatar = computed(() => {
  return props.info ? props.info[props.avatarName]?.slice(0, 1) : "";
});

const imageUrl = computed(() => {
  return props.info ? props.info[props.urlField] : "";
});
</script>
<style scoped lang="scss">
@use "@/assets/styles/mixin";
.avatar {
  @include mixin.flex-inline-flex;
  background-color: #0089ff;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
}

:deep(.el-image) {
  width: 100%;
  height: 100%;
}
</style>
